<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>日记详情</title>
    <link rel="icon" href="pic/favicon.ico" type="image/x-icon">
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('./pic/绿色.png'); /* 替换为你的背景图URL */
            background-size: cover; /* 背景图覆盖整个页面 */
            background-position: center; /* 背景图居中 */
            background-attachment: fixed; /* 背景图固定 */
        }

        /* 日记详情容器 */
        .diary-detail {
            width: 1000px; /* 宽度设置为 1000px */
            height: 600px; /* 高度设置为 600px */
            background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            opacity: 0.8;
        }

        .diary-detail h1 {
            margin-top: 0;
            font-size: 2rem;
            color: #333;
        }

        .diary-detail p {
            line-height: 1.6;
            color: #555;
        }

        /* 文本区域样式 */
        textarea {
            width: calc(100% - 40px); /* 减去左右 padding */
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 1rem;
            resize: vertical; /* 允许垂直调整大小 */
            margin-bottom: 20px;
            background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
        }

        /* 修改按钮样式 */
        button {
            background: linear-gradient(135deg, #6a11cb, #2575fc); /* 渐变背景 */
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: calc(100% - 40px); /* 减去左右 padding */
            margin: 0 10px; /* 左右边距 10px */
        }

        button:hover {
            background: linear-gradient(135deg, #2575fc, #6a11cb); /* 悬停时渐变反转 */
            transform: translateY(-2px); /* 悬停时轻微上移 */
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        button:active {
            transform: translateY(0); /* 点击时恢复原位 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 加载中样式 */
        .loading {
            text-align: center;
            font-size: 1.2rem;
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-if="diary" class="diary-detail">
        <h1>{{ diary.title }}</h1>
        <p><strong>创建时间：</strong>{{ diary.date_time }}</p>
        <p><strong>标签：</strong>{{ diary.label }}</p>
        <textarea id="diary_body">{{ diary.diary_body }}</textarea> <br>
        <button v-on:click="updateDiary()">修改</button>
    </div>
    <div v-else>
        <p>加载中...</p>
    </div>
</div>

<script>
    //vue对象
    const app = {
        data() {
            return {
                diary: null // 日记详情
            };
        },
        methods: {
            // 加载日记详情
            loadDiaryDetail() {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');
                if (!id) {
                    alert('日记 ID 不存在');
                    return;
                }

                // 从 localStorage 中获取用户信息
                const user = JSON.parse(localStorage.getItem('user'));
                if (!user) {
                    alert('用户未登录，请先登录');
                    window.location.href = '/login.html';
                    return;
                }

                //获取日记
                axios({
                    method: 'get',
                    url: '/getDiary', // 使用绝对路径
                    params: {id: id}
                }).then((response) => {
                    this.diary = response.data;
                    console.log(response);
                }).catch((error) => {
                    console.error('获取日记详情失败:', error.response ? error.response.data : error.message);
                    alert('获取日记详情失败，请稍后重试');
                });
            },
            //修改日记
            updateDiary:function (){
                axios({
                    method: 'post',
                    url: '/updateDiary',
                    data:{
                        id:this.diary.id,
                        diary_body:document.getElementById("diary_body").value

                    }
                }).then((response) => {
                    console.log(response);
                    alert("修改成功！")
                    window.location.href = "/viewdiary.html"
                }).catch((error) => {
                    console.error('修改日记详情失败:', error.response ? error.response.data : error.message);
                    alert('修改日记详情失败，请稍后重试');
                });
            }

        },
        mounted() {
            console.log("Vue启动成功");
            this.loadDiaryDetail();
        }
    };

    Vue.createApp(app).mount("#app");
</script>
</body>
</html>